<template>
  <div id="app">
    <first></first>
    <index class="index" />
	<router-view><mainbox class="mainbox"></mainbox></router-view>
	
  </div>
</template>

<script>
import first from './components/first/first.vue'
import index from './components/index.vue'
import mainbox from "./components/mainbox.vue"
export default {
  name: 'app',
  components: {
    index,mainbox
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 80px;
}
.index{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 2000;
}
.mainbox{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 20px auto;
	width: 880px;
	height: 1500px;
	/* background-color: #000000; */
}
/* //默认不换行 */
	/* // 水平垂直居中，竖 */
	.v-hv-center{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	/* //水平居中，垂直顶部，竖 */
	.v-h-center-v-start{
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
	}
	/* //水平开头，垂直居中，横 */
	.h-h-start-v-center{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	/* // 水平开头，垂直开头，横 */
	.h-hv-start{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
	/* //水平两边有边距，平均分配，垂直居中，横 */
	.h-h-sa-v-center{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	/* //水平两边无边距，平均分配，垂直居中，横 */
	.h-h-sb-v-center{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	/* //垂直两边有边距，水平居中，竖 */
	.v-v-sa-h-center{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	/* //垂直两边无边距，水平居中，竖 */
	.v-v-sb-h-center{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	
	/* //换行 */
	/* // 水平垂直居中，竖 */
	.v-hv-center-fw{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	/* //水平居中，垂直顶部，竖 */
	.v-h-center-v-start-fw{
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		flex-wrap: wrap;
	}
	/* //水平开头，垂直居中，横 */
	.h-h-start-v-center-fw{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	/* // 水平开头，垂直开头，横 */
	.h-hv-start-fw{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	/* //水平两边有边距，平均分配，垂直居中，横 */
	.h-h-sa-v-center-fw{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	/* //水平两边无边距，平均分配，垂直居中，横 */
	.h-h-sb-v-center-fw{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	/* //垂直两边有边距，水平居中，竖 */
	.v-v-sa-h-center-fw{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}
	/* //垂直两边无边距，水平居中，竖 */
	.v-v-sb-h-center-fw{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.v-h-start-v-start{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.h-h-sb-v-start{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.v-h-sb-v-center{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.v-h-sa-v-center{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
</style>
